<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>过滤器</title>
	<style>
		#app{
			text-align: center;
			padding: 50px;
		}
		.banner{
			width: 800px;
			height: 150px;
			line-height: 150px;
			text-align: center;
			box-shadow: 5px 5px 10px #888888;
			font-size: 48px;
			font-weight: bolder;
			background-color: #033592;
			color: #ffffff;
			margin:  0 auto;
			border-radius: 20px;
		}
	</style>
</head>
<body>
<div id="app">
	<div class="banner">
		{{ text|aFilter }}
	</div>
</div>
<script src="./js/vue.min.js"></script>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			text:"aaaaa bbbbb ccccc ddddd."
		},
		filters:{
			aFilter:function (val) {
				var strs=val.split(' ');
				var result="";
				for (var i = 0; i < strs.length; i++) {
					result +=strs[i].charAt(0).toUpperCase()+strs[i].substring(1)+" ";
				}
				return result;
			}
		}
	});
</script>
</body>
</html>